<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    canvas{border: solid 1px black;}
  </style>
</head>
<body>
  <canvas id="cvs" width="400" height="400"></canvas>
</body>
<script>

  const cvs = document.querySelector("#cvs");
  const c2d = cvs.getContext("2d");

  // 绘制矩形路径：需要主动描边或填充，否则不可见
  c2d.rect( 50, 50, 100, 100 );

  c2d.fillStyle = "red";
  c2d.lineWidth = 6;

  c2d.stroke();
  c2d.fill();

  c2d.strokeStyle = "red";
  // 绘制描边矩形
  c2d.strokeRect(200, 50, 100, 100);

  c2d.fillStyle = "#000";
  // 绘制填充矩形
  c2d.fillRect(50, 200, 100, 100);


</script>
</html>